<template>
    <div class="container">
      <ul class="container--item__box">
        <li class="container--item__money">
          <span class="container--money__text">支付金额</span>
          <span class="container--money__num">{{$store.state.ConfirmPayment.totalPrice}}元</span>
        </li>
        <li class="container--item__option">
          <span>支付方式</span>
        </li>
        <li class="container--item__paymentOption">
          <input type="checkbox" id="Alipay" checked="true" ref="Alipay">
          <label for="Alipay"></label>
          <img src="../assets/mall/Alipay.png" alt="#">
          <span>支付宝支付</span>
        </li>
        <li class="container--item__addBank">
          <span class="container--item__bef"><span>+</span></span>
          <span class="container--item__text">新卡支付</span>
        </li>
      </ul>
      <div class="container--btn__bottom" @click="pay">确认支付</div>
    </div>
</template>

<script>
export default {
  name: 'onlinePayment',
  data() {
    return {
    };
  },
  methods: {
    pay() {
      if (this.$refs.Alipay.checked) {
        this.$api.pay({
          orderid: this.$store.state.ConfirmPayment.orderId,
        })
          .then((data) => {
            if (data.data.code === 1) {
              this.$store.commit('assignmentPaymentUrl', data.data.data);
              this.$router.push({ name: 'payment' });
            }
          });
      } else {
        this.$popUp({ message: '请选择支付方式' });
      }
    },
  },
  created() {
    this.$store.commit('assignmentConfirmPayment', this.$route.params);
  },
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.container{
  width: 100vw;
  height: 100vh;
  background-color: #f0eff5;
  .container--item__box{
    width: 100vw;
    list-style: none;
    li{
      width: 100vw;
      height: 1.25rem;
      background-color: #fff;
    }
    .container--item__money{
      margin-bottom: (15/75) + rem;
      span{
        line-height: 1.25rem;
        font-size: .35rem;
      }
      .container--money__text{
        margin-left: .35rem;
      }
      .container--money__num{
        float: right;
        margin-right: .35rem;
      }
    }
    .container--item__option{
      border-bottom: 1px solid #ccc;
      span{
        line-height: 1.25rem;
        font-size: .35rem;
        margin-left: .35rem;
      }
    }
    .container--item__paymentOption{
      img{
        width: .8rem;
        height: .8rem;
        vertical-align: middle;
        margin-left: .6rem;
      }
      span{
        font-size: .35rem;
        vertical-align: middle;
        line-height: 1.25rem;
        margin-left: .6rem;
      }
      #Alipay{
        display: none;
      }
      #Alipay + label{
        display: inline-block;
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        border: 1px solid #ccc;
        box-sizing: border-box;
        vertical-align: middle;
        margin-left: .35rem;
      }
      #Alipay:checked + label{
        border: none;
        background-image: url("../assets/register/consent.png");
        background-size: 100%;
    }
    }
    .container--item__border{
      border-bottom: 1px solid #ccc;
    }
    .container--item__addBank{
      line-height: 1.25rem;
      text-align: center;
      span{
        color: #589bf6;
      }
      .container--item__bef{
        vertical-align: middle;
        position: relative;
        width: .5rem;
        height: .5rem;
        display: inline-block;
        border: 1px solid #589bf6;
        border-radius: 50%;
        span{
          font-size: .7rem;
          position: absolute;
          top: -.44rem;
          bottom: 0;
          right: 0;
          left: 0;
          display: block;
          margin: auto;
        }
      }
      .container--item__text{
        font-size: .35rem;
        vertical-align: middle;
        margin-left: .35rem;
      }
    }
  }
  .container--btn__bottom{
    line-height: 1rem;
    background-color: #589bf6;
    font-size: .35rem;
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: 7rem;
    color: #fff;
    text-align: center;
    border-radius: (30/75) + rem;
  }
}
</style>
